<template>
	<cl-crud @load="onLoad">
		<el-row type="flex">
			<cl-refresh-btn />
			<cl-add-btn />
			<cl-multi-delete-btn />
			<cl-flex1 />
			<cl-search-key />
		</el-row>

		<el-row>
			<cl-table
				:props="{
					'default-sort': {
						prop: 'createTime',
						order: 'descending'
					}
				}"
				:columns="[
					{
						type: 'selection',
						align: 'center',
						width: '60'
					},
					{
						label: '地址',
						prop: 'url',
						align: 'center'
					},
					{
						label: '标题',
						prop: 'title',
						align: 'center'
					},
					{
						label: '动作',
						prop: 'action',
						align: 'center'
					},
					{
						label: '动作资源',
						prop: 'actionResource',
						align: 'center'
					},
					{
						label: '状态',
						prop: 'status',
						align: 'center'
					},
					{
						prop: 'createTime',
						label: '创建时间',
						align: 'center',
						sortable: true
					},
					{
						prop: 'updateTime',
						label: '更新时间',
						align: 'center',
						sortable: true
					},
					{
						label: '操作',
						align: 'center',
						type: 'op'
					}
				]"
			>
				<!-- 地址-->
				<template #column-url="{scope}">
					<el-image
						fit="cover"
						lazy
						:src="scope.row.url + '?x-oss-process=image/resize,h_100'"
						:preview-src-list="[scope.row.url]"
					></el-image>
				</template>

				<!-- 动作 -->
				<template #column-action="{scope}">
					<el-tag v-if="scope.row.action == 0" size="small" effect="plain" type="success"
						>跳转网址</el-tag
					>
					<el-tag v-if="scope.row.action == 1" size="small" effect="plain" type
						>跳转应用</el-tag
					>
				</template>

				<!-- 动作资源 -->
				<template #column-actionResource="{scope}">
					<span v-if="scope.row.action == 0">{{ scope.row.actionResource }}</span>
					<span v-if="scope.row.action == 1">{{ scope.row.name }}</span>
				</template>

				<!-- 状态 -->
				<template #column-status="{scope}">
					<el-tag v-if="scope.row.status == 1" size="small" effect="dark" type="success"
						>启用</el-tag
					>
					<el-tag v-else size="small" effect="dark" type="danger">禁用</el-tag>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<cl-pagination />
		</el-row>

		<cl-upsert
			ref="upsert"
			:props="{
				width: '800px'
			}"
			:items="[
				{
					prop: 'url',
					label: '地址',
					component: {
						name: 'cl-upload'
					},
					rules: {
						required: true,
						message: '请上传图片'
					}
				},
				{
					prop: 'title',
					label: '标题',
					component: {
						name: 'el-input',
						props: {
							placeholder: '请填写标题'
						}
					},
					rules: [
						{ required: true, message: '请输入标题', trigger: 'change' },
						{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
					]
				},
				{
					prop: 'action',
					label: '动作',
					component: {
						name: 'el-select',
						options: [
							{
								label: '跳转网址',
								value: 0
							},
							{
								label: '跳转应用',
								value: 1
							}
						],
						on: {
							change: (index) => {
								this.changeType(index);
							}
						}
					}
				},
				{
					prop: 'actionResource',
					label: '动作资源',
					component: {
						name: 'el-input'
					}
				},
				{
					prop: 'actionResource1',
					label: '动作资源',
					hidden: true,
					component: {
						name: 'el-select',
						options: []
					}
				},
				{
					prop: 'status',
					label: '状态',
					value: 1,
					component: {
						name: 'el-radio-group',
						options: [
							{
								label: '启用',
								value: 1
							},
							{
								label: '禁用',
								value: 0
							}
						]
					}
				}
			]"
			:on-submit="onUpsertSubmit"
			@open="onUpsertOpen"
		></cl-upsert>
	</cl-crud>
</template>

<script>
export default {
	data() {
		return {
			actionOptions: []
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.app.banner).done();

			app.refresh();
		},

		hiddenActionResource(index) {
			const { toggleItem } = this.$refs["upsert"];
			toggleItem("actionResource", index != 0);
			toggleItem("actionResource1", index != 1);
		},

		changeType(index) {
			if (index == 1) {
				this.$refs["upsert"].items[4].component.options = this.actionOptions;
			}
			this.hiddenActionResource(index);
		},

		onUpsertOpen(isEdit, data) {
			this.$service.app.release.options({ isDev: 0 }).then((res) => {
				this.actionOptions = res;
			});
			if (isEdit) {
				let index = data.action;
				if (index == 1) {
					data.actionResource1 = data.actionResource;
					this.$refs["upsert"].items[4].component.options = this.actionOptions;
				}
				this.hiddenActionResource(index);
			}
		},

		onUpsertSubmit(isEdit, data, { next }) {
			if (data.action == 1) {
				data.actionResource = data.actionResource1;
			}
			next({
				...data
			});
		}
	}
};
</script>
